<template>
  <div>
    <!-- 增加顾客来源 -->
    <Dialog :visible="visible" :title="typeRow.name ? '修改类型':'增加类型'" class="single-column" button-text="保存" :loading="loading" @close="close" @confirm="submitForm('ruleForm')">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="类型名称:" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="状态:" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="启用" />
            <el-radio label="未启用" />
          </el-radio-group>
        </el-form-item>
      </el-form>
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    typeRow: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      regions: [],
      // adree: '',
      rules: {
        name: [
          { required: true, message: '请输入类型名称名称', trigger: 'blur' },
        ],
      },
      ruleForm: {
        status: '启用',
      },
    };
  },
  watch: {
    typeRow: {
      handler(row) {
        if (row.id) {
          this.ruleForm = JSON.parse(JSON.stringify(row));
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (!valid) return false;
        this.loading = true;
        if (!this.typeRow.id) {
          const res = await this.$api['networkpower/sourceType/addType']({ ...this.ruleForm });
          this.loading = false;
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success("添加来源类型成功");
          this.$emit("successHandle");
        } else {
          const res = await this.$api['networkpower/sourceType/putType']({ ...this.ruleForm });
          this.loading = false;
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success("修改来源类型成功");
          this.$emit("successHandle");
        }
      });
    },
    close() {
      this.$refs['ruleForm'].resetFields();
      this.$emit("closeHandle");
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-form.demo-ruleForm{
  // width: 70% ;
  // transform: translateX(25%);
  // margin-left: 12%;
}
.http{
  color: #aaaaaa;
}
// /deep/.el-dialog__body{
//   padding: 30px 0 !important;
// }
.submits{
  width: 186px;
  height: 30px;
  font-size: 12px;
  background: #0278dc !important;
  border: 1px solid #0278dc !important;
  color: #fff;
  // transform: translateX(23%);
}
</style>
